<template>
<view>
<swiper-direct-com
  :lrDistance="5"
  v-show="!sign && !details"
  ref="direct"
  leftMed="scrollL"
  rightMed="scrollR"
  @scrollL="scrollL"
  @scrollR="scrollR">
<view style="padding-bottom: 1px;min-height: 100vh;">
	<v-tabs v-model="tabVal" :scroll="false" :tabs="['未消除', '已消除', '已逾期']" :fixed="true" @change="changeTab"></v-tabs>
	<view v-show="tabVal == 0">
		<view v-for="(item, index) in notEliminatedList">
			<uni-card :title="item.siteName" :sub-title="getdatatime(item.warningTime)" :extra="item.deviceType == 1?'塔吊':item.deviceType == 2?'吊篮':item.deviceType == 3?'升降机':''" :is-shadow="false" @click="cardClick(item, index, true, false)">
				<view class="content">{{ item.warningContent }}</view>
				<view class="card_bottom">
					<view class="card_bottom_view"><span class="card_bottom_span">预警类型:</span><span>{{ item.warningType }}</span></view>
					<view class="card_bottom_view"><span class="card_bottom_span">预警位置:</span><span>{{ item.warningPosition }}</span></view>
				</view>
			</uni-card>
		</view>
		<uni-card v-if="notEliminatedList.length == 0" :is-shadow="false">
			<image src="../static/images/empty-image-default.png" style="width: 176px;height: 176px;margin-left: calc(50% - 88px);"></image>
			<view  style="width: 100%;text-align: center;color: #969799;font-size: 15px;">暂无数据</view>
		</uni-card>
	</view>
	<view v-show="tabVal == 1">
		<view v-for="(item, index) in eliminatedList">
			<uni-card :title="item.siteName" :sub-title="getdatatime(item.warningTime)" :extra="item.deviceType == 1?'塔吊':item.deviceType == 2?'吊篮':item.deviceType == 3?'升降机':''" :is-shadow="false" @click="cardClick(item, index, false, false)">
				<uni-swiper-dot :current="0" field="content" :mode="'round'">
					<swiper style="width: 340px;height: 240px;">
						<swiper-item v-for="(it ,inx) in item.eliminImg?item.eliminImg.split(','):[]" :key="inx">
							<image style="width: 100%;" :src="it"></image>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>

				<view class="content">{{ item.warningContent }}</view>
				<view class="card_bottom" style="height: 50px;">
					<view class="card_bottom_view"><span class="card_bottom_span">预警类型:</span><span>{{ item.warningType }}</span></view>
					<view class="card_bottom_view"><span class="card_bottom_span">预警位置:</span><span>{{ item.warningPosition }}</span></view>
					<view class="card_bottom_view"><span class="card_bottom_span">消除时间:</span><span>{{ getdatatime(item.eliminTime) }}</span></view>
				</view>
			</uni-card>
		</view>
		<uni-card v-if="eliminatedList.length == 0" :is-shadow="false">
			<image src="../static/images/empty-image-default.png" style="width: 176px;height: 176px;margin-left: calc(50% - 88px);"></image>
			<view  style="width: 100%;text-align: center;color: #969799;font-size: 15px;">暂无数据</view>
		</uni-card>
	</view>
	<view v-show="tabVal == 2">
		<view v-for="(item, index) in overdueList">
			<uni-card :title="item.siteName" :sub-title="getdatatime(item.warningTime)" :extra="item.deviceType == 1?'塔吊':item.deviceType == 2?'吊篮':item.deviceType == 3?'升降机':''" :is-shadow="false" @click="cardClick(item, index, false, true)">
				<view class="content">{{ item.warningContent }}</view>
				<view class="card_bottom">
					<view class="card_bottom_view"><span class="card_bottom_span">预警类型:</span><span>{{ item.warningType }}</span></view>
					<view class="card_bottom_view"><span class="card_bottom_span">预警位置:</span><span>{{ item.warningPosition }}</span></view>
				</view>
			</uni-card>
		</view>
		<uni-card v-if="overdueList.length == 0" :is-shadow="false">
			<image src="../static/images/empty-image-default.png" style="width: 176px;height: 176px;margin-left: calc(50% - 88px);"></image>
			<view  style="width: 100%;text-align: center;color: #969799;font-size: 15px;">暂无数据</view>
		</uni-card>
	</view>
</view>
</swiper-direct-com>
<view v-if="details && !sign && !perView" style="padding-bottom: 1px;">
	<uni-card :is-shadow="false">
		<uni-section title="预警详情" type="line">
			<uni-section title="工地名称">
				<template v-slot:right>
					{{ form.siteName?form.siteName:'暂无数据' }}
				</template>
			</uni-section>
			<uni-section title="预警位置">
				<template v-slot:right>
					{{ form.warningPosition?form.warningPosition:'暂无数据' }}
				</template>
			</uni-section>
			<uni-section title="预警类型">
				<template v-slot:right>
					{{ form.warningType?form.warningType:'暂无数据' }}
				</template>
			</uni-section>
			<uni-section title="预警时间">
				<template v-slot:right>
					{{ getdatatime(form.warningTime) }}
				</template>
			</uni-section>
			<uni-section title="预警内容">
				<template v-slot:right>
					{{ form.warningContent?form.warningContent:'暂无数据' }}
				</template>
			</uni-section>
			<uni-section title="设备类型">
				<template v-slot:right>
					{{ form.deviceType == 1?'塔吊':form.deviceType == 2?'吊篮':form.deviceType == 3?'升降机':'暂无数据' }}
				</template>
			</uni-section>
			<uni-section v-if="!beOverdueShow" title="消除证明"></uni-section>
			<scroll-view v-show="!detailsShow && !beOverdueShow" style="height: 170rpx;width: 100%; white-space: nowrap;margin-top: 10px;" scroll-x="true" >
				<image v-for="(item, index) in form.eliminImg?form.eliminImg.split(','):[]" :key="index" :src="item" @click="swClick(form.eliminImg.split(','), index)"  class="rounded-1  mr-1" style="width: 170rpx; height: 170rpx;margin-right: 10px;"></image>
			</scroll-view>
			<view v-if="detailsShow">
				<button size="mini" type="primary" style="width: 100%;margin-top: 6px;background-color: #0081ff; color: #FFF;" @click="chooseImages">点击上传</button>
				<scroll-view style="height: 170rpx;width: 100%; white-space: nowrap;margin-top: 10px;" scroll-x="true" >
					<image v-for="(item, index) in fileList" :key="index" :src="item" @click="swClick(fileList, index)" @longtap="longtapClick(index)"  class="rounded-1  mr-1" style="width: 170rpx; height: 170rpx;margin-right: 10px;"></image>
				</scroll-view>
				<span style="font-size: 12px;">长按可删除</span>
			</view>
			<uni-section v-if="!detailsShow && !beOverdueShow" title="消除时间">
				<template v-slot:right>
					{{ getdatatime(form.eliminTime) }}
				</template>
			</uni-section>
		</uni-section>
	</uni-card>
	<uni-card v-if="detailsShow" :is-shadow="false">
		<uni-section title="操作" type="line">
			<view style="width: 100%;height: 50px;">
				<button v-if="!signShow" class="reject_button" @click="sign = true">签字</button>
				<button v-if="signShow" class="reject_button" @click="submit">提交</button>
				<button class="white_button" @click="details = false" style="margin-left: 15px;">返回</button>
			</view>
		</uni-section>
	</uni-card>
	<uni-card v-if="!detailsShow" :is-shadow="false">
		<uni-section title="操作" type="line">
			<view style="width: 100%;height: 50px;">
				<button class="white_button" @click="details = false" style="margin-left: 15px;width: 90%;">返回</button>
			</view>
		</uni-section>
	</uni-card>
</view>
<view v-if="perView">
	<view class="mask">
		<view @click="guanClick()" style="font-size: 30px;bottom: 40px;position: absolute;">
			<uni-icons type="closeempty" size="30" color="#FFF"></uni-icons>
		</view>
		<swiper @change="changeSwiper" class="my_swiper" :current="current" :circular="circular" :indicator-dots="indicatorDots" :autoplay="autoplay" :duration="duration">
			<swiper-item v-for="(x, y) in imageList" :key="y">
				<view class="bg_img" :style="{ backgroundImage: 'url('+x+')'}"></view>
			</swiper-item>
		</swiper>
	</view>
	<view class="page" v-if="imageList.length>0">{{ current + 1 }} / {{ imageList.length }}</view>
</view>
<autograph v-if="sign" @change="signChange" @cancel="signcancel"></autograph>
</view>
</template>

<script>
import swiperDirectCom from '@/components/swiper-direct-com.vue'
import vTabs from '@/components/v-tabs.vue'
import autograph from "@/components/autograph.vue"
import {uploadFile} from "@/api/bicu.js"
import {getwarning, putwarning} from "@/api/system/uniapp.js"

export default {
	components:{
		swiperDirectCom,
		autograph,
		vTabs
	},
	data() {
	    return {
	      tabVal: 0,
	      cardIndex: 0,
		  notEliminatedList: [],
		  eliminatedList: [],
		  overdueList: [],
		  notEliminatedPageNum: 1,
		  eliminatedPageNum: 1,
		  overduePageNum: 1,
		  notEliminatedTotal: 1,
		  eliminatedTotal: 1,
		  overdueTotal: 1,
		  fileList: [],
		  imageList: [],
		  sign: false,
		  signShow: false,
		  details: false,
		  detailsShow: false,
		  beOverdueShow: false,
		  perView: false,
		  indicatorDots: false,
		  autoplay: false,
		  duration: 500,
		  form: {},
		  current: 0,
		  siteNumber: null,
	    }
	},
    onLoad: function() {
		this.siteNumber = uni.getStorageSync('siteNumber');
		this.getwarning();
    },
	methods:{
		getwarning(){
			let data = { updateStatic: null, overdue: null, pageNum: 1, pageSize: 10, siteNumber: this.siteNumber };
			if(this.tabVal != 2){
				if(this.tabVal == 0){
					data.pageNum = this.notEliminatedPageNum
				}else{
					data.pageNum = this.eliminatedPageNum
				}
				data.updateStatic = this.tabVal
			}else{
				data.pageNum = this.overduePageNum
				data.overdue = 1
			}
			getwarning(data).then(res => {
				if(this.tabVal == 0){
					this.notEliminatedList = [...this.notEliminatedList, ...res.rows]
					this.notEliminatedTotal = res.total
				}else if(this.tabVal == 1){
					this.eliminatedList = [...this.eliminatedList, ...res.rows]
					this.eliminatedTotal = res.total
				}else if(this.tabVal == 2){
					this.overdueList = [...this.overdueList, ...res.rows]
					this.overdueTotal = res.total
				}
			})
		},
		cardClick(e, index, show, beOverdueShow) {
			this.form = e;
			this.cardIndex = index
			this.detailsShow = show;
			this.beOverdueShow = beOverdueShow;
			this.details = true;
			this.signShow = false;
			this.fileList = [];
			this.$refs.direct.toTop();
		},
		signcancel(){
			this.sign = false;
		},
		swClick(list, index){
			if(list != undefined){
				this.current = index;
				this.imageList = list;
				this.perView = true;
			}
		},
		guanClick(guan){
			this.perView = false;
		},
		changeSwiper(e) {
			this.current = e.target.current;
		},
		signChange(url){
			this.sign = false;
			this.form.userSign = url;
			this.signShow = true;
		},
		submit(){
			this.form.eliminImg = this.fileList.join();
			this.form.updateStatic = 1;
			this.form.eliminTime = new Date();
			uni.showLoading({
				title: '提交中...',
				mask: true
			});
			putwarning(this.form).then(res => {
				if(res.code == 200){
					uni.showToast({
						title: "上报成功!",
						icon: "success",
						position: 'bottom'
					})
					this.detailsShow = false;
					this.eliminatedList.push(this.notEliminatedList[this.cardIndex])
					this.notEliminatedList.splice(this.cardIndex,1);
					uni.hideLoading()
				}else{
					uni.showToast({
						title: '上报失败！',
						icon: 'error',
						duration:2000
					});
					uni.hideLoading()
				}
			})
		},
		changeTab(index) {
			this.tabVal = index
			if(this.tabVal == 0){
				if(this.notEliminatedList.length == 0){
					this.getwarning()
				}
			}else if(this.tabVal == 1){
				if(this.eliminatedList.length == 0){
					this.getwarning()
				}
			}else if(this.tabVal == 2){
				if(this.overdueList.length == 0){
					this.getwarning()
				}
			}
			this.$refs.direct.toTop();
		},
		onReachBottom(){
			if(!this.sign && !this.details){
				let pageNum = 1
				let total = 1
				if(this.tabVal == 0){
					this.notEliminatedPageNum += 1
					pageNum = this.notEliminatedPageNum
					total = this.notEliminatedTotal
				}else if(this.tabVal == 1){
					this.eliminatedPageNum += 1
					pageNum = this.eliminatedPageNum
					total = this.eliminatedTotal
				}else if(this.tabVal == 2){
					this.overduePageNum += 1
					pageNum = this.overduePageNum
					total = this.overdueTotal
				}
				if((pageNum-1)*10 >= total){
					return false
				}
				this.getwarning()
			}
		},
		longtapClick(index){
			var that = this;
			uni.showModal({
				title: '删除文件',
				content: '是否删除该文件？',
				success: (res) => {
					if(res.confirm){
						that.fileList.splice(index,1);
					}
				}
			})
		},
		chooseImages(){
			var that = this
			uni.chooseImage({
				//允许上传的照片数量
				count: 9,
				 // sizeType:  original 原图，compressed 压缩图，默认二者都有
				sizeType: ['original'],
				// sourceType: ['camera','album'], 从相册选择
				sourceType: ['album', 'camera'],
				success: (res) => {
					//因为有一张图片， 输出下标[0]， 直接输出地址
					let data = []
					res.tempFilePaths.forEach(item => {
						data.push({name: 'file', filePath: item})
					})
					for (var i = 0;i < data.length;i ++) {
						uploadFile(data[i]).then(res => {
							that.fileList.push(res.url);
						})
					}
				},
				fail: (err) => {
					// #ifdef MP
					//getSetting 获取用户的当前设置， 判断是否已授权,
					uni.getSetting({
						success: (res) => {
						//用户授权结果，其中 key 为 scope 值，value 为 Boolean 值，表示用户是否允许授权
							let authStatus = res.authSetting['scope.album'];
							if (!authStatus) {
								uni.showModal({
									title: '授权失败',
									content: '系统需要从您的相册和相机的权限，请在设置界面打开相关权限',
									success: (res) => {
									//确认按钮框
										if (res.confirm) {
										//调起客户端小程序设置界面，返回用户设置的操作结果。
											uni.openSetting()
										}
									}
								})
							}
						}
					})
					// #endif
				}
			})
		},
		getdatatime(time, type) {
		  if (!time) {
			return "暂无数据";
		  }
		  if(typeof time == 'string'){
			time = time.replace(/-/g, '/');
		  }
		  const dt = new Date(time);
		  const y = dt.getFullYear();
		  const m = (dt.getMonth() + 1 + "").padStart(2, "0");
		  const d = (dt.getDate() + "").padStart(2, "0");
		  const hh = (dt.getHours() + "").padStart(2, "0");
		  const mm = (dt.getMinutes() + "").padStart(2, "0");
		  const ss = (dt.getSeconds() + "").padStart(2, "0");
		  return `${y}年${m}月${d}日 ${hh}:${mm}:${ss}`;
		},
		scrollL() {
			if(this.tabVal >= 2){
				return false
			}
			this.tabVal += 1;
			if(this.tabVal == 0){
				if(this.notEliminatedList.length == 0){
					this.getwarning()
				}
			}else if(this.tabVal == 1){
				if(this.eliminatedList.length == 0){
					this.getwarning()
				}
			}else if(this.tabVal == 2){
				if(this.overdueList.length == 0){
					this.getwarning()
				}
			}
			this.$refs.direct.toTop()
		},
		scrollR() {
			if(this.tabVal <= 0){
				return false
			}
			this.tabVal -= 1;
			if(this.tabVal == 0){
				if(this.notEliminatedList.length == 0){
					this.getwarning()
				}
			}else if(this.tabVal == 1){
				if(this.eliminatedList.length == 0){
					this.getwarning()
				}
			}else if(this.tabVal == 2){
				if(this.overdueList.length == 0){
					this.getwarning()
				}
			}
			this.$refs.direct.toTop()
		}
	}
  }
</script>

<style lang="scss">
page{
    background-color: #f5f6f7;
}
.content{
	font-size: 16px;
	font-weight: 500;
	min-height: 45px;
	line-height: 45PX;
}
.card_bottom{
	border-top: 1px solid #F5F5F5;
	height: 30px;
	padding-top: 5px;
	margin-top: 5px;
}
.card_bottom_view{
	height: 20px;
	line-height: 20px;
	margin-right: 10px;
	float: left;
}
.card_bottom_span{
	font-weight: bold;
	font-size: 14px;
}
.reject_button{
	background-color: #ecf5ff;
	color: #409eff;
	border: 1px solid #b3d8ff;
	width: 150px;
	font-size: 14px;
	float: right;
}
.white_button{
	background-color: #ffffff;
	color: #000000;
	border: 1px solid #dcdfe6;
	width: 150px;
	font-size: 14px;
	float: left;
}
#sign_button{
	background-color: #f0f9eb;
	color: #67c23a;
	border: 1px solid #c2e7b0;
	width: 100px;
	font-size: 14px;
	margin-left: calc(50% - 110px);
	float: left;
}
.page {
	position: fixed;
	z-index: 6;
	color: #fff;
	bottom: 20rpx;
	text-align: center;
	width: 100%;
}
.mask {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: black;
	z-index: 5;
	> .my_swiper {
		width: 100%;
		height: 75vh;
		.bg_img {
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-position:center;
			width: 100%;
			height: 100%;
		}
	}
}
</style>
